<template>
    <div class="file-tree">
        <el-tree :data="props.treeData" :props="defaultProps" node-key="id" default-expand-all>
            <template #default="{ node, data }">
                <div class="custom-tree-node">
                    <span class="node-icon">
                        <el-icon size="16" color="#78ADF4" v-if="data.type === 'folder'"><Folder /></el-icon>
                        <el-icon size="16" color="#CC2C3C" v-else-if="data.type === 'pdf'"><Document /></el-icon>
                        <el-icon size="16" color="#639E61" v-else-if="data.type === 'excel'"><Document /></el-icon>
                        <el-icon size="16" color="#1D82F6" v-else-if="data.type === 'word'"><Document /></el-icon>
                        <el-icon size="16" color="#F5670F" v-else-if="data.type === 'ppt'"><Document /></el-icon>
                        <el-icon size="16" color="#E59091" v-else-if="data.type === 'txt'"><Document /></el-icon>
                        <el-icon size="16" color="#00A8FF" v-else-if="data.type === 'video'"><VideoPlay /></el-icon>
                    </span>
                    <span class="node-label" :class="{ folder: data.type === 'folder' }" @click="handleNodeClick(data)">{{ node.label }}</span>
                </div>
            </template>
        </el-tree>
    </div>
</template>

<script setup lang="ts">
interface TreeNode {
    id: string
    label: string
    type: 'folder' | 'pdf' | 'excel' | 'word' | 'ppt' | 'txt' | 'video'
    children?: TreeNode[]
    url?: string
}

const props = defineProps<{
    treeData: TreeNode[]
}>()

const defaultProps = {
    children: 'children',
    label: 'label',
}

const handleNodeClick = (file: TreeNode) => {
    if (file.url) {
        window.open(file.url, '_blank')
    }
}
</script>

<style scoped lang="less">
.custom-tree-node {
    display: flex;
    align-items: center;
    gap: 10px;

    .node-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .node-label {
        color: #424242;

        &:not(.folder):hover {
            color: #e63946;
        }
    }
}
</style>
